/*
  学习目标：组件逻辑复用三种方式
  1. 👍自定义hooks
  2. hoc
    本质:
        1. 是一个函数
        2. 函数内部定义组件, 组件内部, 封装逻辑
        3. 接受一个组件, 作为内部组件的子组件
        4. 内部组件, 通过父传子, 复用逻辑
        5. 子组件通过props接收逻辑
    缺点:
      1. 增加组件的嵌套结构

  3. renderProps
    本质:
      1. render是一个props属性, 是一个函数, render负责渲染组件
      2. render的形参传递逻辑
      3. render渲染的子组件, 通过props接收逻辑
    缺点:
      1. 增加组件的嵌套结构
   


*/

import React from 'react';
import { useMouse } from './hooks/useMouse';

export default function App() {
  return (
    <div>
      <Header />
      <Main />
      <Footer />
    </div>
  );
}

function Header() {
  const { mouse, handleMouseMove } = useMouse();
  return (
    <div onMouseMove={handleMouseMove}>
      <h1>
        x: {mouse.x} - y: {mouse.y}
      </h1>
    </div>
  );
}

function Main() {
  const { mouse, handleMouseMove } = useMouse();
  return (
    <div onMouseMove={handleMouseMove}>
      我是
      <h1>
        Main- x: {mouse.x} -y:{mouse.y}
      </h1>
    </div>
  );
}

function Footer() {
  const { mouse, handleMouseMove } = useMouse();
  return (
    <h1 onMouseMove={handleMouseMove}>
      Footer- x: {mouse.x} -y:{mouse.y}
    </h1>
  );
}
